<template>
    <video-player  class="video-player vjs-custom-skin  vjs-big-play-button"
                   ref="videoPlayer"
                   :options="playerOptions"
                   :playsinline="true"
                   customEventName="customstatechangedeventname"
                   @play="onPlayerPlay($event)"
                   @pause="onPlayerPause($event)"
                   @ended="onPlayerEnded($event)"
                   @waiting="onPlayerWaiting($event)"
                   @playing="onPlayerPlaying($event)"
                   @loadeddata="onPlayerLoadeddata($event)"
                   @timeupdate="onPlayerTimeupdate($event)"
                   @canplay="onPlayerCanplay($event)"
                   @canplaythrough="onPlayerCanplaythrough($event)"
                   @statechanged="playerStateChanged($event)"
                   @ready="playerReadied">
    </video-player>
</template>

<script>
    import 'video.js/dist/video-js.css'
    import { videoPlayer } from 'vue-video-player'
    export default {
        name: "VideoPlayer",
        components: {videoPlayer},
        data() {
          return {
            playerOptions: {
              // videojs options
              height: 210,
              muted: true,
              language: 'en',
              playbackRates: [0.7, 1.0, 1.5, 2.0],
              sources: [{
                type: "video/mp4",
                src: "http://vjs.zencdn.net/v/oceans.mp4"
              }],
              poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-1.jpg",
            }
          }
        },
        methods: {
          // listen event
          onPlayerPlay(player) {
            // console.log('player play!', player)
          },
          onPlayerPause(player) {
            // console.log('player pause!', player)
          },
          onPlayerEnded(player) {
            // console.log('player ended!', player)
          },
          onPlayerLoadeddata(player) {
            // console.log('player Loadeddata!', player)
          },
          onPlayerWaiting(player) {
            // console.log('player Waiting!', player)
          },
          onPlayerPlaying(player) {
            // console.log('player Playing!', player)
          },
          onPlayerTimeupdate(player) {
            // console.log('player Timeupdate!', player.currentTime())
          },
          onPlayerCanplay(player) {
            // console.log('player Canplay!', player)
          },
          onPlayerCanplaythrough(player) {
            // console.log('player Canplaythrough!', player)
          },
          // or listen state event
          playerStateChanged(playerCurrentState) {
            // console.log('player current update state', playerCurrentState)
          },
          // player is ready
          playerReadied(player) {
            // seek to 10s
            console.log('example player 1 readied', player)
            player.currentTime(10)
            // console.log('example 01: the player is readied', player)
          }
        }
    }
</script>

<style lang="scss">
  @import "../../assets/css/mixin";
  .video-player{
      width: 100%;
      height: pxToRem(420);
      .video-player-box{
        width: 100%;
        height: 100%;
      }
    .video-js .vjs-big-play-button{
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
      }
  }
  .vjs-custom-skin{
    width: 100%;
    height: pxToRem(420);
  }
</style>
